<template>
  <div class="pl-[8px]">
    <div class="broadside w-52 px-6">
      <div
        :class="[
          'broadside-item cursor-pointer',
          item.label == list[sideActive - 1].label ? 'active' : '',
        ]"
        v-for="(item, index) in list"
        :key="index"
        @click="scrollTop(item.label, list)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="scroll mt-3">
      <svg-icon :icon-class="topScoll ? 'top1' : 'top'" @click="toTop" />
      <svg-icon
        :icon-class="downScoll ? 'down1' : 'down'"
        class="mt-2"
        @click="toDown"
      />
    </div>
  </div>
</template>

<script setup>
import { scrollTarget } from "@/hooks/scrollTop.js";
const props = defineProps({
  list: {
    type: Array,
    default: () => [], //列表数据eg.[{{ label: '基础信息' },}]
  },
});
const { list } = toRefs(props);
watch(
  () => list.value,
  (val) => {
    if (val.length > 0) {
      scrollTarget(val[0].label);
      sideActive.value = 1;
    }
  }
);
const sideActive = ref(1);
function scrollTop(target, data) {
  let index = data.findIndex((item) => item.label === target);
  if (index) {
    sideActive.value = index + 1;
  } else {
    sideActive.value = 1;
  }

  //点击按钮，滚动到对应的位置
  scrollTarget(target);
}

const topScoll = ref(false);
const downScoll = ref(false);
const toTop = () => {
  topScoll.value = true;
  downScoll.value = false;
  let index = sideActive.value == 1 ? sideActive.value : sideActive.value - 1;
  sideActive.value = index;
  scrollTarget(list.value[index - 1].label);
};
const toDown = () => {
  topScoll.value = false;
  downScoll.value = true;
  let index =
    sideActive.value == list.value.length
      ? sideActive.value
      : sideActive.value + 1;
  sideActive.value = index;
  scrollTarget(list.value[index - 1].label);
};
</script>

<style lang="scss" scoped>
.scroll {
  .svg-icon {
    width: 35px;
    height: 35px;
    cursor: pointer;
  }
}
.broadside {
  padding-top: 2rem;
  z-index: 999;
  margin-top: 8px;
  font-size: 14px;
  border-radius: 8px;
  background-color: var(--base-color);
  .broadside-item {
    padding: 0 10px 28px 14px;
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 2px solid var(--base-link-color);
      background-color: #ffffff;
      position: absolute;
      left: 1px;
      top: 9px;
      z-index: 9;
    }

    &::after {
      content: "";
      display: inline-block;
      width: 0px;
      height: 50px;
      border-left: 1px solid var(--base-link-color);
      position: absolute;
      left: 4px;
      top: 12px;
    }

    &:nth-last-child(1)::after {
      content: "";
      display: inline-block;
      width: 0px;
      height: 50px;
      border-left: 0px solid var(--base-link-color);
      position: absolute;
      left: 3px;
      top: 12px;
    }
    &.active {
      color: #3487ff;

      &::before {
        border: 2px solid #3366f1;
      }
    }
  }
}
</style>
